import { useState, useEffect } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import LoginModal from './LoginModal.jsx'
import apiService from '../utils/api.js'

function Header() {
  const location = useLocation()
  const navigate = useNavigate()
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
  const [currentUser, setCurrentUser] = useState(null)
  
  // 组件挂载时和路由变化时检查登录状态并获取用户信息
  useEffect(() => {
    const checkLoginStatus = async () => {
      console.log('=== Header组件检查登录状态 ===')
      const loginStatus = apiService.getLoginStatus()
      console.log('当前登录状态:', loginStatus)
      
      if (loginStatus.isLoggedIn && loginStatus.hasToken) {
        console.log('用户已登录且有token，正在刷新用户信息...')
        try {
          // 刷新页面时，即使本地有token，也通过getUserInfo获取用户信息
          // getUserInfo方法已实现缓存策略：5分钟内不重新请求接口
          const userInfoData = await apiService.getUserInfo();
          
          // 从返回的数据中提取用户信息
          const userInfo = userInfoData.user || userInfoData.data || loginStatus.userInfo;
          
          // 更新组件状态（getUserInfo方法已经处理了本地存储的更新）
          setCurrentUser(userInfo.email);
        } catch (error) {
          console.error('刷新用户信息失败:', error);
          console.log('使用本地存储的用户信息:', loginStatus.userInfo)  
          // 即使获取失败，也使用本地存储的用户信息
          if (loginStatus.hasToken && loginStatus.userInfo) {
            setCurrentUser(loginStatus.userInfo.email)
            console.log('使用本地存储的用户信息:', loginStatus.userInfo.email)
          } else {
            setCurrentUser(null)
            console.log('没有可用的用户信息')
          }
        }
      } else {
        setCurrentUser(null)
        console.log('用户未登录或无有效token')
      }
    }
    
    // 当路由变化时自动重新运行这个effect，从而检查登录状态
    checkLoginStatus()
  }, [location])
  
  const handleLoginClick = () => {
    setIsLoginModalOpen(true)
  }
  
  const handleLoginSuccess = (userData) => {
    // 在实际项目中，这里会存储用户信息和token
    console.log('登录成功', userData)
    setCurrentUser(userData.email)
  }
  
  const handleLogout = async () => {
    try {
      await apiService.logout()
      setCurrentUser(null)
      // 如果当前在"我的音乐"页面，登出后跳转到首页
      if (location.pathname === '/library') {
        navigate('/')
      }
    } catch (error) {
      console.error('登出失败', error)
      // 即使登出请求失败，也清除本地存储和状态
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      setCurrentUser(null)
      // 如果当前在"我的音乐"页面，登出后跳转到首页
      if (location.pathname === '/library') {
        navigate('/')
      }
    }
  }
  
  const handleRegisterClick = () => {
    navigate('/register')
  }
  
  // 处理"我的音乐"点击事件
  const handleLibraryClick = () => {
    if (currentUser) {
      // 如果已登录，正常导航到"我的音乐"页面
      navigate('/library')
    } else {
      // 如果未登录，跳转到登录页面
      navigate('/login')
    }
  }
  
  return (
    <>
      <header className="app-header">
        <div className="logo">音乐网站</div>
        <nav className="main-nav">
          <Link to="/" className={`nav-item ${location.pathname === '/' ? 'active' : ''}`}>首页</Link>
          <Link to="/discover" className={`nav-item ${location.pathname === '/discover' ? 'active' : ''}`}>发现音乐</Link>
          <Link to="/artists" className={`nav-item ${location.pathname === '/artists' ? 'active' : ''}`}>歌手</Link>
          <button 
            onClick={handleLibraryClick} 
            className={`nav-item ${location.pathname === '/library' ? 'active' : ''}`}
            style={{ background: 'none', border: 'none', padding: 0, color: 'inherit', cursor: 'pointer' }}
          >
            我的音乐
          </button>
        </nav>
        <div className="user-controls">
          {currentUser ? (
            <div className="user-profile">
              <span className="user-email">{currentUser}</span>
              <button className="btn-logout" onClick={handleLogout}>退出</button>
            </div>
          ) : (
            <>
              {/* 当不在登录页时显示登录按钮 */}
              {location.pathname !== '/login' && (
                <button className="btn-login" onClick={handleLoginClick}>登录</button>
              )}
              <button className="btn-register" onClick={handleRegisterClick}>注册</button>
            </>
          )}
        </div>
      </header>
      
      <LoginModal 
        isOpen={isLoginModalOpen} 
        onClose={() => setIsLoginModalOpen(false)} 
        onLogin={handleLoginSuccess} 
      />
    </>

)
}

export default Header